import React, { Component } from 'react'
import { Text, View,Image,StyleSheet,TouchableOpacity } from 'react-native'

type OrderList = {
  id:number,
  source:any,
  text:string,
  width:number,
  height:number
}

export class MyOrder extends Component {
  myOrderList:OrderList[] = [
    {id:10001,source:require('../../assets/icons/payment.png'),text:'待付款',width:21,height:19},
    {id:10002,source:require('../../assets/icons/deliver.png'),text:'待发货',width:24,height:20},
    {id:10003,source:require('../../assets/icons/takeDelivery.png'),text:'待收货',width:21,height:20},
    {id:10004,source:require('../../assets/icons/evaluate.png'),text:'待评价',width:24,height:19},
    {id:10005,source:require('../../assets/icons/afterSale.png'),text:'退换/售后',width:22,height:21},
  ]
  orderFn = (id:number)=>{
    console.log('点击了',id)
  }
  render() {
    return (
      <View style={{backgroundColor:'white',borderRadius:10,marginTop:10,flex:1,padding:10}}>
        <View style={{flexDirection:'row',justifyContent:'space-between',borderBottomColor:'#f5f5f5',borderBottomWidth:1}}>
          <Text style={{color:'#666',marginBottom:12}}>我的订单</Text>
          <Text style={{color:'#666'}}>全部 {'>'}</Text>
        </View>
        <View style={{flexDirection:'row',justifyContent:'space-between'}}>
          {this.myOrderList.map(item =>(
            <TouchableOpacity key={item.id} style={styles.orderIcon} onPress={()=>this.orderFn(item.id)}>
              <Image style={{width:item.width,height:item.height}} resizeMethod='resize' source={(item.source)}/>
              <Text style={{marginTop:12}}>{item.text}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  orderIcon:{
    alignItems:'center',
    marginTop:18,
  }
})

export default MyOrder
